<template>
  <a-spin :spinning="confirmLoading">

      <a-card :bordered="false">
        <detail-list title="Invoice">
          <detail-list-item term="ID">{{this.invoiceModel.id}}</detail-list-item>

          <detail-list-item term="Amount"><span style="color: red">{{this.invoiceModel.invoiceAmountFormat}}</span></detail-list-item>
          <detail-list-item term="Status">{{this.invoiceModel.status === 2 ? 'Paid' : 'Reserved' }}</detail-list-item>
          <detail-list-item term="Discount Type">{{this.invoiceModel.discountType ===  1 ? '%' : '$'}}</detail-list-item>
          <detail-list-item term="Tax Rate">{{this.invoiceModel.tax}}%</detail-list-item>
          <detail-list-item term="Date">{{this.invoiceModel.createTime}}</detail-list-item>

          <detail-list-item term="Memo">{{this.invoiceModel.remarks}}</detail-list-item>
          <a-divider style="margin-bottom: 20px"/>
          <detail-list-item term="Course Subtotal"><span style="color: red">{{this.invoiceModel.amountFormat}}</span></detail-list-item>
          <detail-list-item term="Total After Tax"><span style="color: red">{{this.invoiceModel.taxAfterAmountFormat}}</span></detail-list-item>
          <a-divider style="margin-bottom: 20px"/>
          <detail-list-item term="Discount"><span style="color: green">-{{this.invoiceModel.discountAmountFormat}}</span></detail-list-item>
          <detail-list-item term="Credit"><span style="color: green">-{{this.invoiceModel.credit}}</span></detail-list-item>
          <a-divider style="margin-bottom: 20px"/>


        </detail-list>

        <detail-list title="Bill To">
          <detail-list-item term="First Name">{{this.studentModel.firstName}}</detail-list-item>
          <detail-list-item term="Last Name">{{this.studentModel.lastName}}</detail-list-item>
          <detail-list-item term="Email">{{this.studentModel.email}}</detail-list-item>
          <detail-list-item term="Phone">{{this.studentModel.phone}}</detail-list-item>
          <detail-list-item term="Adress">{{this.studentModel.address}}</detail-list-item>

          <a-form-model-item :wrapper-col="{ span: 14, offset: 10 }">
            <a-button type="primary" @click="handleSendEmail">
              Send Email
            </a-button>
            <a-button type="primary" style="margin-left: 10px;" @click="handleInvoicePdf">
              Download PDF
            </a-button>
          </a-form-model-item>
          <a-divider style="margin-bottom: 20px"/>
        </detail-list>
        <div class="title">Course List</div>
        <a-table
          ref="table"
          size="middle"
          :scroll="{x:true}"
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
          :loading="loading"
          class="j-table-force-nowrap"
          @change="handleTableChange">


          <template slot="htmlSlot" slot-scope="text">
            <div v-html="text"></div>
          </template>
          <template slot="imgSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
            <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
          </template>

        </a-table>

        <invoice-send-email-modal ref="sendEmailModal"></invoice-send-email-modal>
        <invoice-down-pdf-modal ref="downpdfModal" ></invoice-down-pdf-modal>

      </a-card>

  </a-spin>
</template>

<script>


import {httpAction, getAction, downFile} from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import PageLayout from '@/components/page/PageLayout'
  import STable from '@/components/table/'
  import DetailList from '@/components/tools/DetailList'
  import ABadge from "ant-design-vue/es/badge/Badge"
  const DetailListItem = DetailList.Item
  import InvoiceSendEmailModal from './InvoiceSendEmailModal'
  import InvoiceDownPdfModal from './InvoiceDownPdfModal'

  export default {
    name: 'InvoiceDetailForm',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      PageLayout,
      ABadge,
      DetailList,
      DetailListItem,
      STable,
      InvoiceSendEmailModal,InvoiceDownPdfModal
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        disableMixinCreated:true,
        studentId:0,
        isEdit:false,
        model:{

         },
        invoiceModel:{

        },
        studentModel:{

        },
        labelCol1: {
          xs: { span: 24 },
          sm: { span: 12 },
        },
        wrapperCol1: {
          xs: { span: 24 },
          sm: { span: 12 },
        },
        confirmLoading: false,
        invoiceCourseList: () => {
          return new Promise((resolve => {
            resolve({
              data: this.dataSource,
              pageSize: 10,
              pageNo: 1,
              totalPage: 1,
              totalCount: 10
            })
          })).then(res => {
            return res
          })
        },
        columns: [
           {
             title: '#',
             dataIndex: '',
             key:'rowIndex',
             width:40,
             align:"center",
             customRender:function (t,r,index) {
               return parseInt(index)+1;
             }
           },
          {
            title:'First Name',
            align:"center",
            width:80,
            dataIndex: 'firstName'
          },
          {
            title:'Last Name',
            align:"center",
            width:80,
            dataIndex: 'lastName'
          },
          {
            title:'Course Name',
            align:"center",
            width:100,
            dataIndex: 'courseName'
          },
          {
            title:'Description',
            align:"center",
            width:120,
            dataIndex: 'description',
           },
          {
            title:'Price',
            align:"center",
            width:140,
            dataIndex: 'priceFormat',
          }
        ],
        url: {
          list:"/sistersophie/courseStudentInfo/invoice/list",
          add: "/sistersophie/invoiceInfo/add",
          edit: "/sistersophie/invoiceInfo/edit",
          queryById: "/sistersophie/invoiceInfo/queryById",
          downLoadPdf: "/sistersophie/invoiceInfo/downloadPdf",
          sendEmail: "/sistersophie/invoiceInfo/sendEmail",
          queryStudentById: "/sistersophie/studentInfo/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      handleSendEmail(){
        console.info(this.invoiceModel);
        this.$refs.sendEmailModal.edit(this.invoiceModel);
        this.$refs.sendEmailModal.title="Send Email";
        this.$refs.sendEmailModal.disableSubmit = true;
      },
      handleInvoicePdf(){
        this.$refs.downpdfModal.edit(this.invoiceModel);
        this.$refs.downpdfModal.title="Download PDF";
        this.$refs.downpdfModal.disableSubmit = true;
      },
      add () {
        this.isEdit = false;
        this.model = Object.assign({}, this.modelDefault);
        this.visible = true;
      },
      edit (record) {
        this.isEdit = true;
        this.model = Object.assign({}, record);
        this.visible = true;
        this.loadEditData();
        this.loadInvoice();
      },
      submitForm () {
        const that = this;
        // 触发表单验证
      },
      loadStudent(studentId){
        var params ={};//查询条件
        params.id = studentId;
        getAction(this.url.queryStudentById, params).then((res) => {
          if (res.success) {
            this.studentModel  = res.result;
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
        })
      },
      loadInvoice(){
        var params ={};//查询条件
        params.id = this.model.id;
        getAction(this.url.queryById, params).then((res) => {
          if (res.success) {
            this.invoiceModel  = res.result;
            if(this.invoiceModel.studentId){
              this.loadStudent(this.invoiceModel.studentId);
            }
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }

        })
      },
      loadEditData(arg) {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params ={};//查询条件
        params.invoiceId = this.model.id;
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records||res.result;
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }else{
              this.ipagination.total = 0;
            }
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
          this.loading = false;
        })
      },
    }
  }
</script>
<style lang="less" scoped>
.title {
  color: rgba(0,0,0,.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
</style>